<template>
  <div class="login-page">
    <el-card class="box-card">
  <template #header>
  <h3 class="title">黑马面经运营后台</h3>
  </template>
   <!--
        表单校验三要素:
          1. el-form 上的 model 属性, 表示要校验的数据, 必须是对象, :model 不是 v-model
          2. el-form 上的 rules 属性, 表示校验的规则是什么
          3. el-form-item 上的 prop 属性, 表示校验项的名字, 强烈建议和数据名一样
       -->
        <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input placeholder="输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input placeholder="输入用户密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button @click="hLogin" type="primary">登录</el-button>
          <el-button @click="hReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: 'admin8',
        password: 'admin'
      },
      rules: {
        // 校验项的名字: 数组, 里面可以装多个校验规则
        username: [
          // 一个对象就是一条校验规则
          // required: 必填项
          // message: 提示信息
          // trigger: 触发时机
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur' }

        ],
        password: [
          // 一个对象就是一条校验规则
          // required: 必填项
          // message: 提示信息
          // trigger: 触发时机
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{5,11}$/, message: '请输入 5 到 10 位的密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    hLogin () {
      // 兜底校验, 表单预校验
      // 获取 DOM 元素可以干什么? 操作 DOM
      // 获取组件对象可以干什么? 调用它的方法 访问他的属性
      // 这一次校验后不需要提醒用户没通过, 为什么? 因为界面上已经把所有错误的地方都提示了
      // validate 进行表单校验, 会校验所有的表单项9
      // 传入一个回调函数, 回调函数的第一个参数就是校验结果
      this.$refs.form.validate(async valid => {
        // console.log(valid)
        // 如果没通过就返回, 不要发请求
        if (!valid) return
        // 发请求登陆: 封装 api => 封装 vuex 的 actions => 调用 api => 获取token => 存储到 vuex 存到本地
        // 发请求登录
        console.log('发送请求')
        // this.$store.dispatch('user/getToken', this.form)
        // 多层结构:看不懂别写 const { data:{token} } = await login(this.form)
        const { data } = await login(this.form)
        // console.log(res.data.data.token)
        this.$store.commit('user/updateToken', data.token)
        // 跳转到首页
        this.$router.push('/')
        // 提醒用户
        this.$message.success('登录成功')
      })
    },
    hReset () {
      // faild 失败
      // fields 字段
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped 的原理:
// 1. 给当前组件的所有标签添加自定义属性 data-v-hash
// 2. 给当前组件所有的选择器添加一个属性交集选择器 [data-v-hash]
// 例如: .el-card__header[data-v-37dfd6fc]
// 此时就会导致第三方组件内部的标签无法应用我们写的样式, 解决方案: 深度选择器
// less / scss 提供的技术: 深度选择器 / 样式穿透 / 样式透传
// less: /deep/
// scss: ::v-deep
.login-page{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/login-bg.svg') no-repeat center;
    background-size: 100%;
}
.el-card{
    width: 420px;
     ::v-deep .el-card__header {
     background-color: #727cf5;
     height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     }
     .title{
     color: white;
     margin: 0;
     font-weight: 400;
     }
}
.el-form {
    padding: 0 20px;
    .btn {
      display: flex;
      justify-content: center;
    }
  }

</style>
